<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html {
                /* css原生也支持变量的设置 */
                --color: #ff0;
                --length: 100px;
            }

            .box1 {
                /* calc计算函数 */
                width: calc(200px / 2);
                height: var(--length);
                background-color: var(--color);
            }

            .box2 {
                width: var(--length);
                height: var(--length);
                color: var(--color);
            }

            .box3 {
                width: var(--length);
                height: var(--length);
                border: 10px var(--color) solid;
            }
        </style>
    </head>
    <body>
        <!-- 
        less是一门css的预处理语言
          - less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式
          - 在less中添加了许多新的特性: 像对变量的支持,对minin的支持... ...
          - less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,
              所以浏览器无法直接执行less代码,要执行必须要将less转换为css,然后再由浏览器执行
        -->
        <div class="box1">aaaa</div>
        <div class="box2">aaaa</div>
        <div class="box3">aaaa</div>
    </body>
</html>
